<template>
  <div class="app-container">
    <div class="search-container">
      <div class="search-wrap">
        <!-- <div style="display:inline-block;">
          <label class="radio-label" style="padding-left:0;">网络名称: </label>
          <el-input v-model="fieldName" placeholder="" style="width:240px;"/>
        </div>

        <div style="display:inline-block;">
          <label class="radio-label">网段: </label>
          <el-input v-model="fieldName" placeholder="" style="width:240px;"/>
        </div>
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-search">
          搜索
        </el-button>
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="info" icon="el-icon-refresh-right">
          重置
        </el-button> -->
      </div>

      <div class="btn-wrap radio-label">
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-circle-plus-outline"
        @click="dialogTableVisible = true">
          新增
        </el-button>
      </div>
    </div>


    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
      <el-table-column align="center" label="编号" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="蜜罐类型"  width="320">
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column label="蜜罐">
        <template slot-scope="scope">
          {{ scope.row.attr }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="320" align="center">
        <template slot-scope="{row}">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-s-operation"
            @click="dialogSetingVisible = true"
          >
            配置蜜罐
          </el-button>

          <el-button
            type="primary"
            size="mini"
            icon="el-icon-notebook-2"
            @click="dialogListVisible = true"
          >
            详细列表
          </el-button>

          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          >
            删除
          </el-button>
        </template>
        
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>


    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="新增蜜罐" @dragDialog="handleDrag" width="1200px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px">
        <el-row>
          <el-col :span="24">
            <div class="form-title">网关配置</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="蜜罐列表" prop="title">
              <el-select v-model="temp.honeypot" class="filter-item" multiple placeholder="请选择蜜罐">
                <el-option v-for="item in honeypotOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="伪装IP列表" prop="title">
              <el-select v-model="temp.ip" class="filter-item" multiple placeholder="请选择伪装IP">
                <el-option v-for="item in ipOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="form-title">
              <span>蜜罐服务配置</span>
              <el-button style="margin-left: 30px;" type="primary" size="mini">添加蜜罐服务</el-button>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-table v-loading="listLoading" :data="formList" element-loading-text="Loading..." fit highlight-current-row>
              <el-table-column align="center" label="编号" width="95">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="蜜罐IP" width="130">
                <template slot-scope="scope">
                  {{ scope.row.ip }}
                </template>
              </el-table-column>
              <el-table-column label="蜜罐服务">
                <template slot-scope="scope">
                  {{ scope.row.server }}
                </template>
              </el-table-column>
              <el-table-column label="运行状态" width="80px">
                <template slot-scope="scope">
                  <el-tag type="success">{{ scope.row.status }}</el-tag>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="150" align="center">
                <template slot-scope="{row}">
                  <el-button
                        type="warning"
                        size="mini"
                      >
                        修改
                      </el-button>

                  <el-button
                    type="danger"
                    size="mini"
                  >
                    删除
                  </el-button>
                </template>
                
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogTableVisible = false">
          确认
        </el-button>
      </div>
    </el-dialog>


    <el-dialog v-el-drag-dialog :visible.sync="dialogSetingVisible" title="配置蜜罐" width="1200px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px">

        <el-row>
          <el-col :span="24">
            <el-form-item label="伪装IP列表" prop="title">
              <el-select v-model="temp.ip" class="filter-item" placeholder="请选择伪装IP">
                <el-option v-for="item in ipOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="form-title">蜜罐选择</div>
          </el-col>
        </el-row>

        <el-row>
          <el-transfer
            :titles="['蜜罐模板列表','选中蜜罐']"
            filterable
            :filter-method="filterMethod"
            filter-placeholder="请输入拼音"
            v-model="setingValue"
            :data="setingData">
          </el-transfer>
        </el-row>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogTableVisible = false">
          确认
        </el-button>
      </div>
    </el-dialog>


    <el-dialog class="detail-list-container" v-el-drag-dialog :visible.sync="dialogListVisible" title="详细列表" width="1200px">

      <div class="base-content">
        <el-row>
          <el-col :span="12">
            <span class="detail-title">蜜罐类型</span>
            <span class="detail-content">应用中间件</span>
          </el-col>

          <el-col :span="12">
            <span class="detail-title">伪装IP</span>
            <span class="detail-content">192.168.11.100</span>
          </el-col>
        </el-row>
      </div>


      <div>
        <el-row>
          <el-col :span="24">
            <div class="form-title">
              伪装服务配置
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-table v-loading="listLoading" :data="detailList" element-loading-text="Loading..." fit highlight-current-row>
              <el-table-column align="center" label="编号" width="95">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <!-- <el-table-column label="蜜罐IP" width="130px">
                <template slot-scope="scope">
                  {{ scope.row.ip }}
                </template>
              </el-table-column> -->
              <el-table-column label="蜜罐服务" >
                <template slot-scope="scope">
                  {{ scope.row.server }}
                </template>
              </el-table-column>
              <el-table-column label="运行状态" width="80px">
                <template slot-scope="scope">
                  <el-tag type="success" v-if="scope.row.status == '运行中'">{{ scope.row.status }}</el-tag>
                  <el-tag type="danger" v-else>{{ scope.row.status }}</el-tag>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="150" align="center">
                <template slot-scope="{row}">
                  <el-button
                        type="warning"
                        size="mini"
                      >
                        修改
                      </el-button>

                  <el-button
                    type="danger"
                    size="mini"
                  >
                    删除
                  </el-button>
                </template>
                
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from '@/api/article'
import { parseTime } from '@/utils'

import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'Trap',
  components: { Pagination },
  directives: { elDragDialog },
  data() {
    const generateData = _ => {
      const data = [];
      const cities = ['Samba蜜罐', 'tomcat蜜罐', 'centos蜜罐', 'mssql蜜罐', 'mysql蜜罐', 'huawei5300蜜罐', 'CRM蜜罐','struts2蜜罐','邮件系统蜜罐','mongoDB蜜罐','debian蜜罐','jboss蜜罐','comware蜜罐','telnet蜜罐'];
      const pinyin = ['Samba', 'tomcat', 'centos', 'mssql', 'mysql', 'huawei5300', 'CRM','struts2','youjian','mongoDB','debian','jboss','comware','telnet'];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        });
      });
      return data;
    };
    return {
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      setingValue: [],
      setingData: generateData(),

      list: null,
      fieldName: '',
      listLoading: true,
      downloadLoading: false,
      autoWidth: true,


      detailList: [
        {
          ip: '12.78.2.68',
          server: 'Tomcat蜜罐',
          status: '运行中'
        }
      ],
      formList: [
        {
          ip: '192.168.2.118',
          server: 'SSH蜜罐,FTP蜜罐,MAIL蜜罐,SMB蜜罐...',
          status: '运行中'
        },
        {
          ip: '203.45.12.85',
          server: '天融信上网行为管理系统蜜罐,天融信防火墙蜜罐,深信服WAF系统蜜罐,奇安信防火墙系统蜜罐...',
          status: '运行中'
        },
      ],
      dialogTableVisible: false,
      dialogSetingVisible: false,
      dialogListVisible: false,

      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published',
        outEth: ['eth0'],
        inEth: 'eth1',
        netType: '静态网络'
      },
      honeypotOptions: ['telnet蜜罐', 'SSH蜜罐', 'FTP蜜罐','DNS蜜罐', 'MAIL蜜罐', 'SMB蜜罐','SFTP蜜罐'],
      ipOptions: ['172.16.10.2', '172.16.10.3','172.16.10.4', '172.16.10.5','172.16.10.6', '172.16.10.7','172.16.10.8','172.16.10.9','172.16.10.10']
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      let data = []
      fetchList().then(response => {
        data.push({
          type: "网络服务",
          attr: "Samba蜜罐、ftp蜜罐、ssh蜜罐、rdp蜜罐、telnet蜜罐、smtp蜜罐、dns蜜罐、mail蜜罐、proftpd蜜罐、stupid-ftp蜜罐…",
        })
        data.push({
          type: "操作系统",
          attr: "windows蜜罐、ubuntu蜜罐、centos蜜罐、comware蜜罐、debian蜜罐、freebsd蜜罐、openeuler蜜罐…",
        })
        data.push({
          type: "应用中间件",
          attr: "PHP蜜罐、tomcat蜜罐、weblogic蜜罐、java蜜罐、jenkins蜜罐、redis蜜罐、apache蜜罐、nginx蜜罐、iis蜜罐、hadoop蜜罐、memcache蜜罐、sol蜜罐r、activeMQ蜜罐、struts2蜜罐、wordpress蜜罐、ngin蜜罐x、jboss蜜罐、joomla蜜罐…",
        })
        data.push({
          type: "数据库",
          attr: "mssql蜜罐、mysql蜜罐、mongoDB蜜罐、postgre蜜罐、mariDB蜜罐、elasticsearch蜜罐、南大通用蜜罐、人大金仓蜜罐...",
        })
        data.push({
          type: "网络设备",
          attr: "huawei5300蜜罐、huawei5310蜜罐、huawei5700蜜罐、huawei5900蜜罐、huaweiEM200蜜罐、huaweiEM300蜜罐、huaweiEM500、cisco2900蜜罐、cisco3500蜜罐、cisco650蜜罐0、H3c5100蜜罐...",
        })
        data.push({
          type: "应用系统",
          attr: "OA蜜罐、CRM蜜罐、天融信上网行为管理系统蜜罐、天融信WAF系统蜜罐、天融信防火墙蜜罐、深信服上网行为管理系统蜜罐、深信服WAF系统蜜罐、深信服准入控制系统蜜罐、奇安信上网行为管理系统蜜罐、奇安信防火墙系统蜜罐、启明防火墙系统蜜罐、亚信防火墙蜜罐...",
        })
        data.push({
          type: "自定义",
          attr: "邮件系统蜜罐、OA系统蜜罐、网站系统蜜罐...",
        })
        this.list = data
        this.listLoading = false
      })
    },
    handleDrag() {
      console.log("添加页面")
    }
  }
}
</script>

<style scoped>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: right;
}
.search-container {
  display: flex;
  justify-content: space-between;
}
.search-wrap {
  flex: 1;
}

.form-title {
  margin-bottom: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #F1F1F1;
  box-sizing: border-box;
}
.el-select {
  width: 100%;
}

.detail-title {
  color: #606266;
  font-weight: bold;
  font-size: 14px;
  margin-right: 10px;
}

.detail-content {
  
  font-size: 14px;
}

.detail-list-container /deep/ .el-dialog__body{
  padding: 0 30px 30px 30px;
}
.base-content {
  padding: 30px 0;
}
</style>
